<template>
  <div class="swipe-pic">
    <!-- 轮播图和下面四个小图标 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 正品保证 -->
    <ul class="correct">
      <li>
        <span><van-icon name="passed" /></span>
        <span>正品保证</span>
      </li>
      <li>
        <span><van-icon name="service-o" /></span> <span>售后无忧</span>
      </li>
      <li>
        <span><van-icon name="thumb-circle-o" /></span> <span>7天无理由</span>
      </li>
      <li>
        <span><van-icon name="gold-coin-o" /></span> <span>假一赔三</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "http://81.68.133.139:3000/images/store/banner1.png",
        "http://81.68.133.139:3000/images/store/banner2.png",
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.swipe-pic {
  margin-top: 60px;
}
.van-swipe {
  height: 150px !important;
}

.van-swipe-item {
  background-color: #fff !important;
  height: 150px !important;

  img {
    width: 100%;
    height: 150px !important;
  }
}
.correct {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  background-color: #f7f7f7;
  color: #b0b0b0;
  padding: 5px 0px;
  li {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid red;
  }
}
</style>
